<template>
    <template v-for="(item, index) in arr" :key="item.id">
        <div v-show="pageSize == index">
            <span>{{ index + 1 }}.</span><span>{{ item.topics }}</span>
            <p v-for="(i, k) in item.options" :key="item.id" v-html="isRadio(item.answer, i, item.id, choose, k)"></p>
            <button @click="pageSize--" v-show="pageSize>0">上一题</button>
            <button @click="pageSize++" v-show="pageSize<arr.length-1">下一题</button>
        </div>
    </template>

</template>

<script setup>
import { ref, reactive } from 'vue';
const pageSize = ref(0);
function isRadio(data, i, j, choose, k) {
    if (data.length > 1) {

        return `<input type="radio" name=${j}>${choose[k]}.${i}`
    } else {
        return `<input type="radio">${choose[k]}.${i}`
    }
}
const choose = ref(['A', 'B', 'C', 'D']);
const arr = ref([
    {
        id: '001',
        type: 0,
        topics: '下列选项中哪一项可以用来设置组件的计算属性？',
        options: ['computed', 'data', 'watch', 'methods'],
        answer: [0]
    },
    {
        id: '002',
        type: 0,
        topics: '下列哪一个指令可以用来绑定动态属性？',
        options: ['v-if', 'v-show', 'v-for', 'v-bind'],
        answer: [3]
    },
    {
        id: '003',
        type: 0,
        topics: '下列选项中哪一项可以用来设置组件的数据？',
        options: ['computed', 'data', 'watch', 'methods'],
        answer: [1]
    },
    {
        id: '004',
        type: 1,
        topics: '下列选项中哪些指令可以实现条件渲染？',
        options: ['v-if', 'v-else', 'v-for', 'v-bind'],
        answer: [0, 1]
    }
]);
</script>

<style scoped></style>